<template>
  <Head>
    <Title>Blogs</Title>
  </Head>

  <PageHeader title="Blogs 2" subtitle="Blogs With Sidebar" :image="`${$config.public.baseUrl}images/bg/home1/5.png`" />


  <div class="blog blog--style1 home padding-top padding-bottom" data-aos="fade-up" data-aos-duration="800">
    <div class="container">
      <div class="section__wrapper">

        <div class="row g-5">
          <div class="col-lg-8 col-12">

            <Pagination :dataList="posts" :paginate="9">
              <template #content="{ list }">
                <div class="row g-4">
                  <div v-for="(itm, idx) in list.splice(0,4)" :key="idx" class="col-md-6" data-aos="fade-up" data-aos-duration="700">
                    <BlogCard :details="itm" />
                  </div>
                </div>
              </template>
              <template #button="{ paginationButtons, updateCurrent, current }">
                <div class="paginations">
                  <ul class="lab-ul d-flex flex-wrap justify-content-center mb-1">
                    <li>
                      <a href="javascript:void(0);" @click="updateCurrent(current - 1 || 1)"><i
                          class="fa-solid fa-arrow-left"></i></a>
                    </li>
                    <li v-for="item in paginationButtons" :key="item">
                      <a href="javascript:void(0);" :class="{ active: current === item }" @click="updateCurrent(item)">
                        {{ item }}
                      </a>
                    </li>
                    <li>
                      <a href="javascript:void(0);" @click="
                        updateCurrent(
                          paginationButtons > current
                            ? current + 1
                            : paginationButtons
                        )
                      "><i class="fa-solid fa-arrow-right"></i></a>
                    </li>
                  </ul>
                </div>
              </template>
            </Pagination>

          </div>

          <div class="col-lg-4 col-md-8  col-12">
            <div class="sidebar">
              <div class="row g-4">
                <div class="col-12">
                  <div class="sidebar__search">
                    <div class="body">
                      <form class="" action="#">
                        <div class="input-group">
                          <input type="text" class="form-control" placeholder="Search">
                          <button type="submit" class="search-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </div>
                      </form>

                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="sidebar__recentpost">
                    <div class="head">
                      <h6>Recent Post</h6>
                    </div>
                    <div class="body">
                      <ul>
                        <li>
                          <div class="thumb">
                            <nuxt-link to="/blog-details"><img src="/images/blog/home3/details/2.png"
                                alt="recentpost-image"></nuxt-link>
                          </div>
                          <div class="content">
                            <p><nuxt-link to="/blog-details">How to create natural backlinks
                                that produce results</nuxt-link></p>
                          </div>
                        </li>
                        <li>
                          <div class="thumb">
                            <nuxt-link to="/blog-details"><img src="/images/blog/home3/details/3.png"
                                alt="recentpost-image"></nuxt-link>
                          </div>
                          <div class="content">
                            <p><nuxt-link to="/blog-details">How to create natural backlinks
                                that produce results</nuxt-link></p>
                          </div>
                        </li>
                        <li>
                          <div class="thumb">
                            <nuxt-link to="/blog-details"><img src="/images/blog/home3/details/4.png"
                                alt="recentpost-image"></nuxt-link>
                          </div>
                          <div class="content">
                            <p><nuxt-link to="/blog-details">How to create natural backlinks
                                that produce results</nuxt-link></p>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="sidebar__categorie">
                    <div class="head">
                      <h6>Categories</h6>
                    </div>
                    <div class="body">
                      <div class="content">
                        <ul>
                          <li>
                            <a href="#">
                              Advices</a>
                          </li>
                          <li>
                            <a href="#">
                              Business</a>
                          </li>
                          <li>
                            <a href="#">
                              Consulting</a>
                          </li>
                          <li>
                            <a href="#">
                              Marketing</a>
                          </li>
                          <li>
                            <a href="#">
                              Personal</a>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="sidebar__tags">
                    <div class="head">
                      <h6>Tags</h6>
                    </div>
                    <div class="body">
                      <div class="content">
                        <ul>
                          <li><a href="#" class="active">Web Design</a></li>
                          <li><a href="#">Education</a></li>
                          <li><a href="#">Marketing</a></li>
                          <li><a href="#">Seo</a></li>
                          <li><a href="#">Graphic Design</a></li>
                          <li><a href="#">Management</a></li>
                          <li><a href="#">Learning</a></li>
                          <li><a href="#">Development</a></li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

      <section class="blog blog--style1  padding-bottom" data-aos="fade-up" data-aos-duration="800">
          <div class="container">
              <LatestBlog :posts="posts" />
          </div>
      </section>

      <div class="blog home blog--details padding-bottom">
          <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
              <BlogComments />
          </div>
      </div>

      <div class="newsletter" data-aos="fade-up" data-aos-duration="800">
          <div class="container">
              <NewsLetter />
          </div>
      </div>

</template>

<script>
import PageHeader from '@/components/partials/PageHeader.vue'
import LatestBlog from '@/components/modules/blog-details/LatestBlog.vue'
import BlogComments from '@/components/modules/blog-details/BlogComments.vue'
import NewsLetter from '@/components/partials/newsletters/Newsletter.vue'
import BlogCard from "@/components/partials/BlogCard.vue"
import Pagination from "@/components/base/slots/Pagination.vue"

export default {
    components: { PageHeader, BlogCard, Pagination, LatestBlog, BlogComments, NewsLetter },
    async setup() {
        const { axios } = fetchData()

        const blog = await axios.get('/blog.json')
        const posts = blog.data.posts
        return {
            posts
        }
    },
}
</script>